<script setup lang="ts">
import BaseSettingsPanel from '@/views/home/BaseSettingsPanel.vue'
import Wallpaper from '@/views/home/Wallpaper.vue'
import UserCenter from '@/views/home/UserCenter.vue'
import SearchType from '@/views/home/SearchType.vue'
import type { Panel } from '@/components/home/type/Panel'
import { inject, reactive, ref } from 'vue'
const panels = reactive<Map<string, Panel>>(new Map<string, Panel>())
panels.set('user', {
  id: '0',
  name: '用户',
  active: true,
  icon: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})
panels.set('basePanel', { id: '1', name: '基本', active: false, icon: '' })
panels.set('wallpaper', { id: '2', name: '壁纸', active: false, icon: '' })
panels.set('searchType', { id: '3', name: '搜索引擎', active: false, icon: '' })

const tabClick = (panel) => {
  for (let entry of panels.entries()) {
    if (entry[0] == panel[0]) {
      entry[1].active = true
    } else {
      entry[1].active = false
    }
  }
}
</script>

<template>
  <div class="container">
    <ul>
      <li
        v-for="(panel, key) in panels"
        @click="tabClick(panel)"
        class="tab"
        :style="{ backgroundColor: panel[1].active ? '#fff' : '' }"
      >
        <span
          v-if="panel[0] == 'user'"
          style="display: flex; align-items: center"
        >
          <el-avatar :size="30" :src="panel[1].icon" />
          <span style="margin-left: 5px">江寻月</span>
        </span>
        <span v-else>
          {{ panel[1].name }}
        </span>
      </li>
    </ul>
    <user-center v-show="panels?.get('user').active" />
    <base-settings-panel v-show="panels?.get('basePanel').active" />
    <wallpaper v-show="panels?.get('wallpaper').active" />
    <SearchType v-show="panels?.get('searchType').active" />
  </div>
</template>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: row;
  ul {
    background-color: #dadadf;
    color: black;
    li:first-of-type {
      width: max-content;
    }
    li {
      padding: @marginTop 5px 5px @marginLeft;
      font-size: 14px;
    }
    .tab:hover {
      cursor: pointer;
    }
  }
}
</style>
